<template>
    <el-card>
        <template #header>
            <h3>药品信息</h3>
        </template>
        <!-- 搜索区域 -->
        <el-button type="primary" class="add" @click="showAddWindow()">添加药品</el-button>
        <el-form inline>
            <el-form-item label="药品名称" style="width: 200px">
                <el-input v-model="params.name"></el-input>
            </el-form-item>
            <el-form-item label="适应症" style="width: 200px">
                <el-input v-model="params.indications"></el-input>
            </el-form-item>
            <el-form-item label="生产商" style="width: 200px">
                <el-input v-model="params.manufacturer"></el-input>
            </el-form-item>
            <el-form-item label="批准文号" style="width: 200px">
                <el-input v-model="params.approvalNumber"></el-input>
            </el-form-item>
            <el-form-item label="是否为处方药">
                <el-select v-model="params.isOTC" placeholder="" style="width: 70px">
                    <el-option v-for="item in OTCOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchMedications()">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格区域 -->
        <el-table :data="medications" border @sort-change="handleSortChange">
            <!-- 扩展行 -->
            <el-table-column label="详情" type="expand" width="60">
                <template #default="props">
                    <el-descriptions class="margin-top" :column="1" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">适应症：</div>
                            </template>
                            {{ props.row.indications }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">规格：</div>
                            </template>
                            {{ props.row.specification }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">单位：</div>
                            </template>
                            {{ props.row.unit }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">用法用量：</div>
                            </template>
                            {{ props.row.dosage }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">注意事项：</div>
                            </template>
                            {{ props.row.precautions }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">不良反应：</div>
                            </template>
                            {{ props.row.adverse_effects }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">有效期：</div>
                            </template>
                            {{ props.row.expiration_date }}
                        </el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column label="图片" align="center" width="175">
                <template #default="scope">
                    <el-image v-if="scope.row.medication_img" :src="scope.row.medication_img"
                        class="row-medication-img"></el-image>
                    <el-image v-else src="src\assets\imgs\暂无图片.png" class="row-medication-img"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="药品名称" prop="name" sortable="custom" align="center" width="220"></el-table-column>
            <el-table-column label="价格" prop="price" sortable="custom" align="center" width="80"></el-table-column>
            <el-table-column label="生产商" prop="manufacturer" sortable="custom" align="center"
                width=""></el-table-column>
            <el-table-column label="批准文号" prop="approval_number" sortable="custom" align="center"
                width="160"></el-table-column>
            <el-table-column label="OTC" prop="is_otc" sortable="custom" align="center" width="80">
                <template #default="scope">
                    <span v-if="(scope.row.is_otc == false)">非</span>OTC
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template #default="scope">
                    <el-button type="primary" @click="showEditWindow(scope.row)">编辑</el-button>
                    <!-- 删除确认气泡 -->
                    <el-popconfirm width="250" icon-color="#626AEF" title="确认删除该药品吗？">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                        <template #actions="{ confirm, cancel }">
                            <el-button size="small" @click.once="cancel">取消</el-button>
                            <el-button type="danger" size="small" @click.once="deleteMedication(scope.row, confirm)">
                                确认
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination v-if="params.total > 0" :current-page="params.currentPage" :page-size="params.pageSize"
            background layout="total, prev, pager, next" :total="params.total" @current-change="handleCurrentChange" />
    </el-card>
    <!-- 药品信息编辑弹窗 -->
    <el-dialog v-model="showEdit" title="药品信息" width="500" @close="closeWindow">
        <el-form :model="row" label-width="120px" :rules="rules" ref="rowForm">
            <!-- 上传图片 -->
            <el-form-item label="图片" prop="avatar">
                <el-upload class="avatar-uploader" action="http://127.0.0.1:8082/upload" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <el-image v-if="row.medication_img" :src="row.medication_img" class="medication_img"></el-image>
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="row.name"></el-input>
            </el-form-item>
            <el-form-item label="适应症" prop="indications">
                <el-input v-model="row.indications"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input v-model="row.price"></el-input>
            </el-form-item>
            <el-form-item label="产品规格" prop="specification">
                <el-input v-model="row.specification"></el-input>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
                <el-select v-model="row.unit" placeholder="" style="width: 70px">
                    <el-option v-for="item in unitOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="用法用量" prop="dosage">
                <el-input v-model="row.dosage"></el-input>
            </el-form-item>
            <el-form-item label="注意事项" prop="precautions">
                <el-input v-model="row.precautions"></el-input>
            </el-form-item>
            <el-form-item label="不良反应" prop="adverse_effects">
                <el-input v-model="row.adverse_effects"></el-input>
            </el-form-item>
            <el-form-item label="有效期" prop="expiration_date">
                <el-input v-model="row.expiration_date"></el-input>
            </el-form-item>
            <el-form-item label="是否为处方药" prop="is_otc" width="250px">
                <el-select v-model="row.is_otc" placeholder="" style="width: 70px">
                    <el-option v-for="item in OTCOptionsEdit" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="生产商" prop="manufacturer">
                <el-input v-model="row.manufacturer"></el-input>
            </el-form-item>
            <el-form-item label="批准文号" prop="approval_number">
                <el-input v-model="row.approval_number"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button v-if="!showAdd" type="primary" @click="updateMedication(row)">保存</el-button>
                <el-button v-if="showAdd" type="primary" @click="addMedication(row)">添加</el-button>
                <el-button @click="showEdit = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { healthInstitutionFindAPI } from '@/api/healthInstitution';
import { medicationAddAPI, medicationFindAPI, medicationUpdateAPI, medicationDeleteAPI } from '@/api/medication';
import { ElMessage } from 'element-plus';
export default {
    data() {
        return {
            params: {
                // 搜索关键词
                institution_id: '',
                name: '',
                price: '',
                isOTC: '',
                manufacturer: '',
                approvalNumber: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            role: JSON.parse(sessionStorage.getItem("user")).role,
            medications: [],
            showEdit: false,
            showAdd: false,
            row: {},
            OTCOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '0',
                    label: '否'
                },
                {
                    value: '1',
                    label: '是'
                }
            ],
            OTCOptionsEdit: [
                {
                    value: false,
                    label: '否'
                },
                {
                    value: true,
                    label: '是'
                }
            ],
            unitOptions: [
                {
                    value: '盒',
                    label: '盒'
                },
                {
                    value: '支',
                    label: '支'
                },
                {
                    value: '瓶',
                    label: '瓶'
                },
                {
                    value: '剂',
                    label: '剂'
                },
                {
                    value: '片',
                    label: '片'
                },
                {
                    value: '丸',
                    label: '丸'
                },
                {
                    value: '粒',
                    label: '粒'
                },
                {
                    value: '袋',
                    label: '袋'
                }
            ],
            rules: {
                name: { required: true, message: '名称不能为空', trigger: 'blur' },
                indications: { required: true, message: '适应症不能为空', trigger: 'blur' },
                price: { required: true, message: '价格不能为空', trigger: 'blur' },
                stock: { required: true, message: '库存不能为空', trigger: 'blur' },
                specification: { required: true, message: '规格不能为空', trigger: 'blur' },
                unit: { required: true, message: '单位不能为空', trigger: 'blur' },
                dosage: { required: true, message: '用法用量不能为空', trigger: 'blur' },
                precautions: { required: true, message: '注意事项不能为空', trigger: 'blur' },
                adverse_effects: { required: true, message: '不良反应不能为空', trigger: 'blur' },
                expiration_date: { required: true, message: '有效期不能为空', trigger: 'blur' },
                is_otc: { required: true, message: '是否为处方药不能为空', trigger: 'blur' },
                manufacturer: { required: true, message: '生产商不能为空', trigger: 'blur' },
                approval_number: { required: true, message: '批准文号不能为空', trigger: 'blur' }
            },
        }
    },
    methods: {
        loadMedicationInfoList() {
            medicationFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    // resp.data.code.is_otc = resp.data.code.is_otc == true ? 1 : 0;
                    this.medications = resp.data.datas;
                    this.params.total = resp.data.total;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        searchMedications() {
            this.loadMedicationInfoList();
        },
        handleCurrentChange(page) {
            this.params.currentPage = page;
            this.loadMedicationInfoList();
        },
        // 图片上传成功之后回调函数
        handleAvatarSuccess(response) {
            this.row.medication_img = response;
        },
        showEditWindow(row) {
            this.row = JSON.parse(JSON.stringify(row));
            this.showEdit = true;
        },
        updateMedication(row) {
            this.$refs.rowForm.validate((val) => {
                if (val) {
                    medicationUpdateAPI(row).then((resp) => {
                        if (resp.data.code == 2000) {
                            this.loadMedicationInfoList();
                            ElMessage.success(resp.data.message);
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    })
                }
            })
            this.showEdit = false
        },
        deleteMedication(row, confirm) {
            medicationDeleteAPI(row).then((resp) => {
                if (resp.data.code == 2000) {
                    this.loadMedicationInfoList();
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
            confirm();
        },
        showAddWindow() {
            this.row = {};
            this.showEdit = true;
            this.showAdd = true;
        },
        addMedication(row) {
            row.role = 2;
            this.$refs.rowForm.validate((val) => {
                if (val) {
                    medicationAddAPI(row).then((resp) => {
                        if (resp.data.code == 2000) {
                            this.loadMedicationInfoList();
                            this.showEdit = false;
                            this.showAdd = false;
                            ElMessage.success(resp.data.message);
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    })
                }
            })
        },
        closeWindow() {
            this.loadMedicationInfoList();
            this.showEdit = false;
            this.showAdd = false;
        },
        loadHealthInstitutionDropDownList() {
            healthInstitutionFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.healthInstitutionDropDown = resp.data.datas;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        handleSortChange({ prop, order }) {
            if (order) {
                // 根据 prop 和 order 进行排序
                this.params.sortProp = prop;
                this.params.sortOrder = order === 'ascending' ? 'asc' : 'desc';
                this.loadMedicationInfoList();
            } else {
                // 清除排序
                delete this.params.sortProp;
                delete this.params.sortOrder;
                this.loadMedicationInfoList();
            }
        }
    },
    created() {
        this.loadMedicationInfoList();
        this.loadHealthInstitutionDropDownList();
    }
}
</script>

<style scoped>
.el-pagination {
    margin: 20px 0 0 450px;
    align-items: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.row-medication-img {
    width: 150px;
    height: 100px;
}

.medication_img {
    width: 200px;
    height: 200px;
}

.add {
    position: relative;
    top: -10px;
}
</style>